<template>
	<!-- 查询 -->
	<PageContainer>
		<div class="search-container">
			<n-button @click="search">查询</n-button>
		</div>
		<div class="container">
			<BasicTable ref="basicTable" :title="'角色列表'" :columns="columns" :pagination="{pageSize:10,pageNum:1}"
				:loadUrl="getRoleList">
			</BasicTable>
		</div>
		<assign-permissions-modal ref="assignPermissionRef"></assign-permissions-modal>
	</PageContainer>
</template>

<script setup lang="ts">
	import { reactive, ref,h } from 'vue';
	import { BasicTable } from '@/components/Common/BasicTable';
	import AssignPermissionsModal from '@/views/system/role/components/AssignPermissionsModal.vue';
	import { getRoleList,sendMessage } from '@/api/system';
	import {NButton } from 'naive-ui'
	import type { DataTableColumns } from 'naive-ui'
	import PageContainer from '@/components/Common/PageContainer/index.vue'
	
	const columns:DataTableColumns = reactive([
		{
			title: '角色名称',
			key: 'role_name'
		},
		{
			title: '角色描述',
			key: 'details'
		},
		{
			title: '操作',
			key: 'actions',
			render(row) {
				return  [
					h(
						NButton,
						{
							size: 'small',
							onClick: () => assignPermissions(row)
						},
						{ default: () => '分配权限' }
					),
					h(
						NButton,
						{
							size: 'small',
							class: 'ml-10',
							onClick: () => viewUsers(row)
						},
						{ default: () => '查看用户' }
					)
				]
			}
		}
	])
	const basicTable = ref(null)
	const params = {
		'user_name': 'zh'
	}
	function search() {
		basicTable.value?.initData(params)
	}
	const assignPermissionRef = ref(null)
	function assignPermissions(row){
		assignPermissionRef.value?.open(row)
	}
	function viewUsers(row){
		sendMessage().then(res=>{
			console.log("发送消息")
		})
	}
</script>

<style lang="scss" scoped>
	@mixin bg-border{
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
	} 
	.search-container{
		@include bg-border();
		margin-bottom: 10px;
	}
	.container {
		height: calc(100% - 30px);
		overflow:hidden;
		padding:10px;
		background: #fff;
	}
</style>